<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'

// 使用 useRouter 创建一个 router 实例
const router = useRouter()
const num = ref('1')

const back = () => {
  router.go(-1);
}

const go = () => {
  router.push({ path: '/ArticleDetails' })
}
</script>

<template>
  <div id="box">
    <!-- 导航 -->
    <div class="navBox">
      <div class="navBox_title">
        <div style="width: 42%;"><van-icon name="arrow-left" @click="back" /></div>
        <div>文章资讯</div>
      </div>
    </div>
    <!-- 列表 -->
    <div class="fl_Box">
      <div class="navBox_title_but">
        <div :class="num == 1 ? 'active' : 'but'" @click="num = 1">全部</div>
        <div :class="num == 2 ? 'active' : 'but'" @click="num = 2">情侣</div>
        <div :class="num == 3 ? 'active' : 'but'" @click="num = 3">送礼</div>
        <div :class="num == 4 ? 'active' : 'but'" @click="num = 4">鲜花</div>
      </div>
      <div class="fl_Box_top">
        <van-search placeholder="请输入关键词" shape="round" />
        <div class="fl_Box_top_font">搜索</div>
      </div>
      <div class="fl_Box_bottom">
        <!-- 根据num动态切换显示div内容 -->
        <div v-show="num == 1">
          1234565
        </div>
        <div v-show="num == 2">
          <div class="article_box" v-for="item in 4" @click="go">
            <div class="article_box1">向日葵的花语</div>
            <div class="article_box2">
              向日葵的花语是忠诚、沉默的爱。因为向日葵是太阳虔诚的追
              随者，每天随着太阳运行的方向转动，把自己一生所有的热爱
              都献给了太阳，但是又从来都不会说出口，所以向日葵
            </div>
            <div class="article_box3">向日葵的花语</div>
          </div>
        </div>
        <div v-show="num == 3">5678</div>
        <div v-show="num == 4">枝数2233</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#box {
  .navBox {
    height: 60px;
    background-color: #f84c55;

    .navBox_title {
      color: #fff;
      display: flex;
      padding: 10px;
      box-sizing: border-box;
    }
  }

  .fl_Box {
    background-color: #f6f6f6;
    height: 100vh;
    border-radius: 10px 10px 0 0;
    margin-top: -10px;
    padding: 15px;
    box-sizing: border-box;

    .navBox_title_but {
      margin: 25px auto 20px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;

      .but {
        width: 20%;
        text-align: center;
        color: #a9a9a9;
        padding: 5px 8px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 15px;
        margin-right: 10px;
      }

      .active {
        width: 20%;
        margin-right: 10px;
        text-align: center;
        color: #f96e75;
        border: 1px solid #f96e75;
        line-height: 30px;
        background-color: #f6cad7;
        box-sizing: border-box;
        border-radius: 15px;
      }
    }

    .fl_Box_top {
      position: relative;
      margin-bottom: 20px;

      .fl_Box_top_font {
        height: 34px;
        background-color: #f96e75;
        color: #fff;
        width: 70px;
        line-height: 34px;
        text-align: center;
        border-radius: 0 20px 20px 0;
        font-size: 12px;
        padding: 0 10px;
        box-sizing: border-box;
        position: absolute;
        right: 0;
        bottom: 0;
      }

      .van-search {
        padding: 0;
        border-radius: 20px;
        box-sizing: border-box;
        box-shadow: 5px 5px 5px #ccc;
      }
    }

    .fl_Box_bottom {
      .article_box {
        border-radius: 10px;
        margin-bottom: 10px;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0 1px 5px #ccc;

        .article_box1 {
          font-weight: bold;
          font-size: 18px;
        }

        .article_box2 {
          margin: 5px 0;
          color: #7c7c7c;
        }

        .article_box3 {
          color: #a9a9a9;
          font-size: 14px;
        }
      }
    }
  }
}
</style>